<template>
	<view class="main">
		<header-vue :back="true" title="确认下单"></header-vue>
		<view class="bg-box"></view>
		<view class="list">
			<view class="status">
				<view class="font40 fontbold-500">待付尾款</view>
				<view class="flex start font24" style="margin-top: 12rpx;">
					<i class="iconfont icon-clock"></i>
					请于2025-09-12 00:00 前付清尾款
				</view>
			</view>
			<view class="white-box" style="padding-bottom: 0;">
				<view class="flex item">
					<image :src="IMAGE_URL + '/static/login/bg.png'"></image>
					<view class="flex column between start store-info">
						<view>
							<view class="flex start">
								<!-- <view class="tag font20">自营</view> -->
								<view class="font28 fontbold-500">巴旦木去核奶枣零食夹心</view>
							</view>
							<view class="sale-num font24">已选：日常保洁2小时</view>
						</view>
						<view class="flex between font20 num">
							<view class="flex price">
								<text class="font24">￥</text>
								<text class="font32">45</text>
								<text class="font24">/60分钟</text>
								<text class="font20" style="color: #999;margin-left: 12rpx;">一口价</text>
							</view>
							<view class="font24">X1</view>
						</view>
					</view>
				</view>
			</view>
			<view class="white-box">
				<view class="flex start font30 fontbold-500">
					<image :src="IMAGE_URL + '/static/mine/title-icon.png'" class="title-icon"></image>
					<view>预约信息</view>
				</view>
				<view class="flex between form-item font28" style="align-items: flex-start;">
					<view class="color-666">服务地址</view>
					<view style="width: 420rpx;text-align: right;">河北保定华望城悦华园二区34号楼4-204</view>
				</view>
				<view class="flex between form-item font28">
					<view class="color-666">预约时间</view>
					<view>6月13日 18:30</view>
				</view>
				<view class="flex between form-item font28" style="border: 0;">
					<view class="color-666">虚拟资产</view>
					<view>-20.00</view>
				</view>
				<view class="flex between form-item font28" style="border: 0;">
					<view class="color-666">预约人</view>
					<view>刘昊然 15689635463</view>
				</view>
			</view>
			<view class="white-box">
				<view class="flex between" @click="goPage('/views/mine/shifudetail')">
					<view class="flex font30 fontbold-500">
						<image :src="IMAGE_URL + '/static/mine/title-icon.png'" class="title-icon"></image>
						<view>师傅信息</view>
					</view>
					<i class="iconfont icon-jiantou font28"></i>
				</view>
				<view class="flex start user">
					<image :src="IMAGE_URL + '/static/login/bg.png'" class="avatar"></image>
					<view>
						<view class="font28 fontbold-500">刘德华</view>
						<view class="flex info font24">
							<image :src="IMAGE_URL + '/static/mine/sex.png'" class="sex"></image>
							<view>52岁</view>
							<view class="line"></view>
							<view>河北保定</view>
						</view>
					</view>
				</view>
			</view>
			<view class="white-box">
				<view class="flex start font30 fontbold-500">
					<image :src="IMAGE_URL + '/static/mine/title-icon.png'" class="title-icon"></image>
					<view>收费明细</view>
				</view>
				<view class="flex between form-item font28">
					<view class="color-666">服务价格</view>
					<view>80.00</view>
				</view>
				<view class="flex between form-item font28">
					<view class="color-666">优惠券</view>
					<view>-20.00</view>
				</view>
				<view class="flex between form-item font28" style="border: 0;">
					<view class="color-666">虚拟资产</view>
					<view>-20.00</view>
				</view>
				<view class="flex between form-item font28" style="border: 0;">
					<view>实际金额</view>
					<view>合计：41.00</view>
				</view>
			</view>
			<view class="white-box" style="padding-top: 0;">
				<view class="flex between form-item font28">
					<view class="color-666">订单编号</view>
					<view>DD70058687923622</view>
				</view>
				<view class="flex between form-item font28">
					<view class="color-666">订单备注</view>
					<view>内容内容内容</view>
				</view>
				<view class="flex between form-item font28" style="border: 0;">
					<view class="color-666">下单时间</view>
					<view>2025-06-01 12:23:21</view>
				</view>
				<view class="flex between form-item font28" style="border: 0;">
					<view class="color-666">支付方式</view>
					<view>微信支付</view>
				</view>
			</view>
		</view>
		<view class="flex between fixed">
			<view class="flex start">
				<view class="item font20" style="text-align: center;">
					<i class="iconfont icon-kefu font40"></i>
					<view>联系客服</view>
				</view>
			</view>
			<view class="flex font36 fontbold-500">
				<view class="flex btn-join" @click="addGoods('cart')">取消订单</view>
				<view class="flex btn-buy" @click="addGoods('buy')">去支付</view>
			</view>
		</view>
		<u-popup :show="showModal" round="28rpx" mode="center" @close="showModal = false">
			<view class="flex modal-title">
				<view class="flex font28 fontbold-500">备注</view>
				<i class="iconfont icon-close font32" @click="showModal = false"></i>
			</view>
			<view class="modal-content">
				<textarea placeholder="请输入~" v-model="value" class="font24"></textarea>
				<view class="font24 txt-len">{{value.length}}/100</view>
			</view>
			<view class="modal-footer" style="padding: 40rpx 64rpx 28rpx 64rpx">
				<view class="flex submit-btn font32 fontbold-500" @click="showModal = false">确认</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import headerVue from '@/components/header.vue'
	import numBoxVue from '../../views/shop/components/numBox.vue'
	import {
		searchApi
	} from '../../api/modules/shop'
	import appConfig from '@/config/app.js'

	export default {
		data() {
			return {
				IMAGE_URL: appConfig.IMAGE_URL,
				params: {
					keyword: ''
				},
				tabIndex: 0,
				value: '',
				showModal: false
			}
		},
		components: {
			headerVue,
			numBoxVue,
		},
		mounted() {},
		methods: {
			goPage(url) {
				uni.navigateTo({
					url
				});
			},
		}
	}
</script>
<style lang="scss" scoped>
	.main {
		background: #F6F6F6;
	}

	.list {
		padding: 0 32rpx 100rpx;
		box-sizing: border-box;
		position: relative;
		z-index: 1;

		.status {
			margin: 28rpx 0;
		}
	}

	.color-gold {
		color: #DF9824 !important;
	}

	.icon-clock {
		font-size: 24rpx;
		color: #DF9824;
		margin-right: 4rpx;
	}

	.bg-box {
		height: 400rpx;
		background: linear-gradient(to bottom, #F3FAFF 0%, rgba(243, 250, 255, 0) 100%) !important;
		position: absolute;
		width: 100vw;
		left: 0;
		z-index: 0;
	}

	.white-box {
		background: $uni-bg-color;
		box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(0, 0, 0, 0.08);
		border-radius: 20rpx;
		padding: 28rpx 28rpx 16rpx 28rpx;
		box-sizing: border-box;
		margin-bottom: 28rpx;
		
		.title-icon {
			width: 32rpx;
			height: 24rpx;
			margin-right: 10rpx;
		}

		.store-title {
			padding-bottom: 28rpx;
		}

		.iconfont {
			margin-right: 4rpx;
		}

		image {
			width: 200rpx;
			height: 200rpx;
			border-radius: 16rpx;
			margin-right: 20rpx;
			flex-shrink: 0;
		}

		.price {
			color: $uni-text-color-red;
			align-items: baseline;
		}

		.item {
			padding-bottom: 28rpx;
		}

		.store-info {
			width: 100%;
			height: 200rpx;
			align-items: flex-start;

			.tag {
				padding: 0 8rpx;
				height: 28rpx;
				box-sizing: border-box;
				background: #DF9824;
				border-radius: 4rpx;
				margin-right: 8rpx;
				color: $uni-text-color-inverse;
			}

			.sale-num {
				color: $uni-text-color-grey;
				margin-top: 12rpx;
			}

			.num {
				color: $uni-text-color-grey1;
				width: 100%;
			}

			.icon-comment {
				margin-left: 26rpx;
			}
		}

		.color-666 {
			color: $uni-text-color-grey1;
		}
		
		.user {
			margin-top: 30rpx;
			
			.avatar {
				width: 88rpx;
				height: 88rpx;
				border-radius: 50%;
				margin-right: 20rpx;
			}
			
			.sex {
				width: 40rpx;
				height: 40rpx;
				margin-right: 12rpx;
			}
			
			.info {
				color: #999;
			}
			
			.line {
				height: 24rpx;
				width: 2rpx;
				background: #DDDDDD;
				margin: 0 12rpx;
			}
		}

		.form-item {
			padding: 28rpx 0 12rpx 0;
			box-sizing: border-box;

			.icon-jiantou {
				margin-left: 8rpx;
				margin-right: 0;
			}

			.flex {
				width: 400rpx;
			}

			input {
				text-align: right;

				::v-deep .input-placeholder {
					color: #AAAAAA;
				}
			}
		}
	}

	.fixed {
		position: fixed;
		width: 100%;
		z-index: 3;
		min-height: 88rpx;
		background: $uni-bg-color;
		padding: 0 32rpx;
		box-sizing: border-box;
		bottom: env(safe-area-inset-bottom);
		box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(0, 0, 0, 0.1);

		.btn-buy,
		.btn-join {
			padding: 0 26rpx;
			height: 76rpx;
			border-radius: 60rpx;
			color: $uni-text-color-inverse;
			min-width: 228rpx;
			box-sizing: border-box;
		}

		.btn-buy {
			background: linear-gradient(90deg, #0785CF 0%, #25A4EF 100%);
			box-shadow: 0rpx 4rpx 20rpx 0rpx rgba(7, 133, 207, 0.1);
		}

		.btn-join {
			margin-right: 20rpx;
			background: linear-gradient(90deg, #DF9824 0%, #F4B042 100%);
			box-shadow: 0rpx 4rpx 20rpx 0rpx rgba(223, 152, 36, 0.1);
		}

		.radio {
			width: 22rpx;
			height: 22rpx;
			border-radius: 50%;
			border: 1rpx solid $uni-color-primary;
			margin-right: 8rpx;
		}

		.active {
			color: $uni-text-color;

			.radio {
				background: $uni-color-primary;
				color: $uni-text-color-inverse;
			}
		}
	}

	.modal-box {
		padding: 0 32rpx 60rpx;
		box-sizing: border-box;

		.list-box {
			background: #F6F6F6;
			border-radius: 16rpx;
			padding: 20rpx;
			box-sizing: border-box;

			.title {
				color: $uni-text-color-grey1;
			}
		}
	}

	.modal-content {
		padding: 0 28rpx;
		box-sizing: border-box;
		position: relative;
		color: $uni-text-color-grey;

		textarea {
			width: calc(100vw - 140rpx);
			height: 220rpx;
			background: #FAFAFA;
			border-radius: 8rpx 8rpx 8rpx 8rpx;
			padding: 20rpx;
			box-sizing: border-box;
			width: 100%;
		}

		.txt-len {
			position: absolute;
			bottom: 32rpx;
			right: 40rpx;
		}
	}

	.modal-footer {
		padding: 20rpx 64rpx 40rpx 64rpx;
		box-sizing: border-box;

		.submit-btn {
			width: 100%;
			height: 84rpx;
			background: $uni-color-primary;
			box-shadow: 0rpx 6rpx 12rpx 0rpx rgba(7, 133, 207, 0.16);
			border-radius: 100rpx;
			color: $uni-text-color-inverse;
		}
	}
</style>